<template>
  <el-header class="os-header"
             height="48px">
    <div class="os-header--container">
      <div class="os-header__title"
           v-g-font="{top:5}"
           @click="$router.push('/')">
        <img src="@/assets/images/icon.svg"
             width="30"
             height="30"
             style="margin-right: 4px;">
        <span class="os-header__text">Vite Vue3 demo</span>
      </div>
      <div :span="12"
           style="text-align: right;">
        <div class="os-header--search">
          <i class="iconfont icon-search"
             @click="searchIconClick"></i>
          <transition name="navSearch"
                      ref="searchRef">
            <el-select v-show="isSearch"
                       v-model="searchText"
                       popper-class="os-header--search__select"
                       @change="searchHandle"
                       placeholder="搜索"
                       no-match-text="未搜索到关键信息"
                       filterable>
              <el-option v-for="item in dropdownItems"
                         :key="item.value"
                         :label="item.name"
                         :value="item.value">
              </el-option>
            </el-select>
          </transition>
        </div>
        <el-dropdown @command="dropdownHandle"
                     @visible-change="dropdownVisible"
                     trigger="hover"
                     style="margin-right: 10px;">
          <div class="os-header--dropdowntext">
            {{dropdownText}}
            <i class="iconfont icon-xiangxia"
               ref="dropdownRef"></i>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :command="el.value"
                                v-for="el in dropdownItems"
                                :key="el.value">
                <i class="iconfont"
                   :class="el.icon"></i>{{el.name}}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown @command="handleSetting"
                     trigger="click">
          <div class="os-header--dropdowntext">
            <i class="iconfont icon-shezhi"></i>设置
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :command="el.value"
                                v-for="el in setItems"
                                :key="el.value">
                {{el.name}}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <i class="iconfont os-header__screenfull"
           :class="screenfullIcon"
           @click="screenfullActive"></i>
      </div>
    </div>
    <el-dialog title="主题设置"
               v-model="showDialog"
               :width="350">
      <el-radio-group v-model="theme"
                      class="os-header--theme">
        <el-radio label="dark">色1</el-radio>
        <el-radio label="light">色2</el-radio>
      </el-radio-group>
    </el-dialog>
  </el-header>
</template>
<script lang="ts">
  import { defineComponent } from 'vue'
  import { ElHeader, ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
  import useHeader from './header'
  export default defineComponent({
    components: {
      ElHeader,
      ElDropdown,
      ElDropdownMenu,
      ElDropdownItem,
    },
    setup(props) {
      return {
        ...useHeader(props),
      }
    },
  })
</script>
<style lang="scss" scoped>
  @include b(header) {
    background: #161823;
    // background: linear-gradient(45deg, #101010, #2c3e50);
    line-height: 48px;
    width: 100%;
    box-shadow: 1px 0 10px 0 #4f567d;
    @include m(container) {
      display: flex;
      justify-content: space-between;
    }
    @include e(title) {
      font-weight: bold;
      letter-spacing: 3px;
      text-transform: uppercase;
      cursor: pointer;
    }
    @include m(dropdowntext) {
      color: $--color-font;
      margin-right: 10px;
      cursor: pointer;
      i {
        font-size: 12px;
        transition: transform 0.8s;
      }
      &:hover {
        color: $--color-hover;
      }
      .icon-shezhi {
        font-size: 15px;
        margin-right: 4px;
      }
    }
    @include e(screenfull) {
      font-size: 18px;
      cursor: pointer;
      margin-left: 15px;
    }
    @include m(search) {
      display: inline-block;
      cursor: pointer;
      margin-right: 15px;
      .icon-search {
        font-size: 18px;
      }
      @include e(select) {
        border: none;
      }
      :deep(.el-input__inner) {
        border: none;
        padding-left: 0;
        background: rgba(0, 0, 0, 0);
        color: $--color-font;
        padding-left: 8px;
      }
      :deep(.el-select) {
        border-bottom: 1px solid $--color-font;
      }
    }
    @include m(theme) {
      :deep(.el-radio__label) {
        color: #fff;
      }
    }
  }
  .navSearch-enter-active,
  .navSearch-leave-active {
    transition: width 0.5s;
  }
  .navSearch-enter-to,
  .navSearch-leave-from {
    width: 200px;
    // transform: translateX(0px);
  }
  .navSearch-enter-from,
  .navSearch-leave-to {
    width: 0px;
    // transform: translateX(30px);
  }
  .navSearch-leave-to {
    width: 18px;
  }
  @media screen and (max-width: 650px) {
    .os-header__text {
      display: none;
    }
  }
</style>